<template>
	<cl-drawer
		ref="drawer"
		:props="{
			title: '发起人',
			size: '550px',
			appendToBody: true
		}"
		class="set_promoter"
		@before-close="savePromoter"
		show-confirm
		@confirm="savePromoter"
		@close="closeDrawer"
	>
		<div class="demo-drawer__content">
			<div class="promoter_content drawer_content">
				<p>
					{{ arrToStr(flowPermission) ? arrToStr(flowPermission) : "所有人" }}
				</p>
				<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
			</div>
		</div>
	</cl-drawer>
</template>
<script>
import { mapGetters } from "vuex";
import funcMixin from "./func.js";

export default {
	mixins: [funcMixin],
	data() {
		return {
			flowPermission: [],
			promoterVisible: false,
			checkedList: []
		};
	},
	computed: {
		...mapGetters({
			flowPermission1: "flowDesignFlowPermission",
			promoterDrawer: "flowDesignPromoterDrawer"
		})
	},
	watch: {
		flowPermission1: {
			deep: true,
			handler(v) {
				this.flowPermission = v.value;
			}
		},
		promoterDrawer(v) {
			this.toggle(v);
		}
	},
	methods: {
		toggle(v) {
			this[v ? "open" : "close"]();
		},
		open() {
			this.$refs.drawer.create();
		},
		close() {
			this.$refs.drawer.close();
		},
		addPromoter() {
			this.checkedList = this.flowPermission;
			this.promoterVisible = true;
		},
		surePromoter(data) {
			this.flowPermission = data;
			this.promoterVisible = false;
		},
		savePromoter() {
			this.$store.commit("updateFlowPermission", {
				value: this.flowPermission,
				flag: true,
				id: this.flowPermission1.id
			});
			this.closeDrawer();
		},
		closeDrawer() {
			this.$store.commit("updatePromoter", false);
		}
	}
};
</script>
<style lang="scss">
.set_promoter {
	.promoter_content {
		padding: 0 20px;
		.el-button {
			margin-bottom: 20px;
		}
		p {
			padding: 18px 0;
			font-size: 14px;
			line-height: 20px;
			color: #000000;
		}
	}
}
</style>
